<template>
  <view>
    <uni-popup ref="detailStaffSealAdd" type="dialog">
      <uni-popup-dialog
          type="info"
          cancelText="取消"
          confirmText="确认"
          title="新增授权"
          @close="cancel"
          @confirm="submitForm"
          before-close>
        <template v-slot="content">
          <uni-forms
              ref="form"
              :modelValue="form"
              :rules="rules"
              label-width="150rpx"
              type="line"
              labelPosition="top">
            <uni-forms-item label="授权对象" name="selectStaffId" required>
              <custom-tree-select
                  placeholder="请选择授权对象"
                  mutiple
                  linkage
                  clearable
                  search
                  border
                  :choseParent="false"
                  :linkage="false"
                  confirmTextColor="#00a660"
                  :listData="deptOptions"
                  v-model="form.selectStaffId"
              ></custom-tree-select>
            </uni-forms-item>
            <uni-forms-item label="授权有效期" name="isLong" required>
              <uni-datetime-picker
                  v-model="authDateRange"
                  :start="new Date().getTime()"
                  type="daterange"
                  :disabled="isLong==0 ? false : true"
                  @change="handleDatetimePickerChange"/>
            </uni-forms-item>
            <uni-data-checkbox
                multiple
                v-model="selectDate"
                :localdata="dateOption"
                selectedColor="#00a660"
                :checked="true"
                @change="handleDateCheckboxChange"/>
          </uni-forms>
        </template>
      </uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script>
import {treeSelectAndStaff} from "@/api/ec/console/org/dept";
import {addStaffSeal} from "@/api/ec/console/seal/staffSeal";

export default {
  props: {
    sealId: {
      type: Number,
    }
  },
  data() {
    return {
      // 长期有效复选框数据
      dateOption: [{text: '长期有效', value: 0},],
      // 长期有效:默认选中
      selectDate: [0],
      // 授权有效期
      authDateRange: [],
      // 是否长期：1长期有效 0选择日期
      isLong: 1,
      // 表单参数
      form: {
        sealCompanyId: null,
        // 开始时间
        startDate: null,
        // 结束时间
        endDate: null,
        // 是否长期：1长期有效 0选择日期
        isLong: 1,
        // 已选人员数据id
        selectStaffId: [],
      },
      // 表单校验
      rules: {
        selectStaffId: {rules: [{required: true, errorMessage: '请选择要授权的成员'}]},
        isLong: {rules: [{required: true, errorMessage: '请选择授权有效期'}]},
      },
      // 授权对象tree数据
      deptOptions: [],
    }
  },
  created() {
    this.getTreeSelect()
  },
  methods: {
    /** 打开弹出框 */
    toOpenDialog() {
      this.form = {
        sealCompanyId: null,
        // 开始时间
        startDate: null,
        // 结束时间
        endDate: null,
        // 是否长期：1长期有效 0选择日期
        isLong: 1,
        // 已选人员数据id
        selectStaffId: [],
      };
      this.selectDate = [0];
      this.isLong = 1;
      this.authDateRange = [];
      this.$refs.detailStaffSealAdd.open('center')
    },
    /** 关闭弹窗 */
    cancel() {
      this.$refs.detailStaffSealAdd.close()
    },
    /** 查询部门下拉树结构 */
    getTreeSelect() {
      this.$modal.loading();
      let data = {isCertify: 1, status: 1}
      treeSelectAndStaff(data).then(response => {
        uni.hideLoading();
        let dataList = response.data;

        // 递归重新组装数据
        function action(dataList) {
          if (!dataList || dataList.length <= 0) {
            return null;
          }
          return dataList.map(item => {
            const model = {name: item.label, id: item.id, disabled: item.isDept};
            const children = action(item.children);
            if (children) {
              model.children = children;
            }
            return model;
          });
        }

        this.deptOptions = action(dataList);
      }).catch(() => {
        uni.hideLoading();
      });
    },
    /** 长期有效 复选框改变 */
    handleDateCheckboxChange(e) {
      if (e.detail.data.length == 1) {
        this.isLong = 1;
        this.form.isLong = 1;
      } else {
        this.isLong = 0;
        this.form.isLong = null;
      }
    },
    /** 日期选择框改变 */
    handleDatetimePickerChange(e) {
      if (e.length == 2) {
        this.form.isLong = 0;
      } else {
        this.form.isLong = null;
      }
    },
    /** 添加成员 */
    submitForm() {
      this.$refs.form.validate().then(valid => {
        if (valid) {
          this.form.sealCompanyId = this.sealId;
          if (this.isLong != 1) {
            this.form.startDate = this.authDateRange[0];
            this.form.endDate = this.authDateRange[1];
            this.form.isLong = 0;
          } else {
            this.form.isLong = 1;
          }
          this.$modal.loading();
          addStaffSeal(this.form).then(response => {
            uni.hideLoading();
            this.$emit("success", "");
            this.$modal.msgSuccess("授权成功");
            this.cancel();
          }).catch(() => {
            uni.hideLoading();
            this.$modal.msgError("授权失败!");
          });
        }
      });
    },
  }
}
</script>

<style scoped lang="scss">
::v-deep .uni-popup__error {
  color: #999999;
}

::v-deep .uni-popup-dialog {
  width: 85%;
}

::v-deep .uni-dialog-content {
  padding: 30rpx;
  display: block;
}

</style>
